import React from 'react';
import { Card, List, Tag, Typography, Row, Col, Select, Button } from 'antd';
import { EnvironmentOutlined } from '@ant-design/icons';

const { Title } = Typography;
const { Option } = Select;

const NearbyRecommend: React.FC = () => {
  const [distance, setDistance] = React.useState('500');

  const nearbyProducts = [
    {
      id: 1,
      name: '二手笔记本电脑',
      price: 1200,
      category: '电子产品',
      distance: '150m',
      location: '软件学院',
      description: '联想ThinkPad，i5处理器，8G内存，使用一年'
    },
    {
      id: 2,
      name: '英语四级词汇书',
      price: 15,
      category: '书籍资料',
      distance: '200m',
      location: '外语学院',
      description: '全新四级词汇书，附带光盘'
    },
    {
      id: 3,
      name: '台灯',
      price: 25,
      category: '生活用品',
      distance: '300m',
      location: '宿舍区',
      description: 'LED护眼台灯，亮度可调节'
    },
    {
      id: 4,
      name: '篮球',
      price: 50,
      category: '运动器材',
      distance: '450m',
      location: '体育馆',
      description: '标准7号篮球，使用过几次'
    }
  ];

  const distanceOptions = [
    { label: '100米以内', value: '100' },
    { label: '500米以内', value: '500' },
    { label: '1公里以内', value: '1000' },
    { label: '2公里以内', value: '2000' },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2}>附近商品</Title>
      
      {/* 筛选区域 */}
      <Card style={{ marginBottom: '24px' }}>
        <Row gutter={16} align="middle">
          <Col>
            <span>距离范围：</span>
          </Col>
          <Col>
            <Select 
              value={distance} 
              onChange={setDistance}
              style={{ width: 150 }}
            >
              {distanceOptions.map(option => (
                <Option key={option.value} value={option.value}>
                  {option.label}
                </Option>
              ))}
            </Select>
          </Col>
          <Col>
            <Button type="primary">刷新位置</Button>
          </Col>
          <Col flex="auto" style={{ textAlign: 'right' }}>
            <Tag icon={<EnvironmentOutlined />} color="blue">
              当前位置：软件学院
            </Tag>
          </Col>
        </Row>
      </Card>

      {/* 附近商品列表 */}
      <Row gutter={[16, 16]}>
        {nearbyProducts.map(product => (
          <Col xs={24} sm={12} lg={8} key={product.id}>
            <Card 
              hoverable
              cover={
                <img
                  alt={product.name}
                  src={`https://picsum.photos/300/200?${product.id * 30 + 10}`}
                  style={{ height: '150px', objectFit: 'cover' }}
                />
              }
              actions={[
                <Button type="link">查看详情</Button>,
                <Button type="link">联系卖家</Button>
              ]}
            >
              <Card.Meta
                title={
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span>{product.name}</span>
                    <Tag color="green">{product.distance}</Tag>
                  </div>
                }
                description={
                  <div>
                    <div style={{ fontSize: '18px', color: '#ff4d4f', margin: '8px 0' }}>
                      ¥{product.price}
                    </div>
                    <div style={{ marginBottom: '8px' }}>
                      <Tag color="blue">{product.category}</Tag>
                      <Tag color="orange">{product.location}</Tag>
                    </div>
                    <div style={{ color: '#666', fontSize: '14px' }}>
                      {product.description}
                    </div>
                  </div>
                }
              />
            </Card>
          </Col>
        ))}
      </Row>

      {/* 地图区域（预留） */}
      <Card title="附近商品分布" style={{ marginTop: '24px' }}>
        <div style={{ 
          height: '300px', 
          background: '#f5f5f5', 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center',
          borderRadius: '6px'
        }}>
          <div style={{ textAlign: 'center' }}>
            <EnvironmentOutlined style={{ fontSize: '48px', color: '#1890ff' }} />
            <div style={{ marginTop: '16px' }}>地图功能（预留）</div>
            <div style={{ color: '#999' }}>这里将显示商品在地图上的分布位置</div>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default NearbyRecommend;